<template>
  <div class="home">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <a class="navbar-brand title" href="#">TodoList</a>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <ul class="nav navbar-nav">
          <li><router-link to="/add">代办事项</router-link></li>
          <li><router-link to="/done">已完成事项</router-link></li>
          <li><router-link to="/delete">删除事项</router-link></li>
        </ul>
      </div>
    </nav>
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
  components: {
  }
})
</script>

<style scoped lang="scss">
  .title {
    display: flex;
    align-items: center;
    margin-right: 80px;
    color: midnightblue;
    padding: 0 0 0 50px;
  }
</style>
